<template>
  <div class="weather-service">
    <div class="screen-item-title bg-title">气象服务</div>
    <div class="weather-sub-title">实时气象</div>
    <div class="weather-wrap d-flex justify-content-between">
      <div v-for="(item, index) in weather_show_data_key" :class="item" :key="item">
        <div :class="getDynamic(index)"></div>
        <div class="show_data_name text-center text-white">{{ weather_show_data_value[index] }}</div>
        <div class="show_data_value text-center">
          <span class="show_data_value1">
            {{ todayDaily[weather_show_data_key[index]] }} <span class="unit-small">{{ weather_show_data_unit[index] }}</span>
          </span>
        </div>
      </div>
    </div>
    <div class="weather-sub-title">未来一周天气预报</div>
    <div>
      <div class="weather-report position-relative d-flex justify-content-between">
        <div v-for="item in daily" class="text-white text-center d-flex flex-column itemDay justify-content-between">
          <div>
            <div>
              {{ item.today }}
            </div>
            <div>
              {{ item.textDay }}
            </div>
          </div>
          <div>
            <div>{{ item.precip }}mm</div>
            <div>{{ item.windScaleDay }}级</div>
            <div>{{ item.humidity }}%</div>
          </div>
        </div>
        <div id="weather-container"></div>
      </div>
    </div>
    <div class="screen-item-title bg-title detection">{{ code }}菇房传感器监测</div>
    <div class="d-flex justify-content-between flex-wrap">
      <div v-for="item in list" :key="item.className" class="detection-item">
        <div :class="item.className"></div>
        <div class="circle-dot"></div>
        <span class="name">{{ item.name }}</span>
        <span class="detection-value text-white">{{ dataObj[item.key] }} {{ item.unit }}</span>
      </div>
    </div>
    <div class="screen-item-title bg-title smart">智能化管理记录</div>
    <div id="circle-record"></div>
  </div>
</template>
<script setup lang="ts">
import { weather_url, weather_now } from '../util/weatherApi';
import { onMounted } from 'vue';
import axios from 'axios';
import { ref } from 'vue';
import charData from './char';
import getOption from './circle';
import * as echarts from 'echarts';
import eventEmitter from '@/util/listener';
import monitor from '@/api/monitor';
const weather_show_data_key = ref(['temp', 'humidity', 'precip', 'windScale', 'windDir', 'radiate']);
const weather_show_data_value = ref(['温度', '湿度', '降水', '风速', '风向', '辐射']);
const weather_show_data_unit = ref(['℃', '%', 'mm', '级', '', '（MJ/㎡）']);
(async () => {
  await getTodayData();
  await get7DayData();
  initChart();
})();
const isLoadTodayData = ref(false);
const todayDaily = ref({});
const daily = ref<any>([]);
onMounted(() => {});
const getDynamic = (index) => {
  return `weather-${11 + index} weather-item`;
};
async function getTodayData() {
  return axios.get(weather_now).then((data: any) => {
    let radiate = 3000 + Math.random() * 1500;
    radiate = parseInt(radiate + '');
    data.data.now.radiate = radiate;
    todayDaily.value = data.data.now;
    isLoadTodayData.value = true;
  });
}
async function get7DayData() {
  return axios.get(weather_url).then((data: any) => {
    daily.value = data.data.daily as any[];
    daily.value.forEach((item) => {
      item.today = item.fxDate.substring(5).replace('-', '.');
    });
    console.log('daily', daily);
  });
}

function initChart() {
  const weatherContainer = document.getElementById('weather-container');
  if (weatherContainer) {
    const myChart = echarts.init(weatherContainer);
    charData.xAxis.data = daily.value.map((item) => item.fxDate);
    charData.series[0].data = daily.value.map((item) => item.tempMax);
    charData.series[1].data = daily.value.map((item) => item.tempMin);
    // let mins = charData.series[1].data.sort((a, b) => {
    //   return a - b;
    // });
    // charData.yAxis.min =
    myChart.setOption(charData);
  }
}

const list = ref([
  { className: 'Icon20', unit: '℃', key: 't', name: '空气温度', value: '' },
  { className: 'Icon21', unit: '%', key: 'rh', name: '空气湿度', value: '' },
  { className: 'Icon22', unit: 'klux', key: 'sunshine', name: '光照强度', value: '' },
  { className: 'Icon23', unit: 'ppm', key: 'co2', name: '二氧化碳浓度', value: '' },
]);
function initRecordChart() {
  const circleRecord = document.getElementById('circle-record');
  if (circleRecord) {
    const myChart = echarts.init(circleRecord);
    // var datas = [
    //   { name: '进风控制', value: 10000 },
    //   { name: '排风控制', value: 12345 },
    //   { name: '加湿控制', value: 12345 },
    //   { name: '灯光控制', value: 12345 },
    // ];
    var datas = [
      [
        { name: '进风控制', value: 10000 + Math.random() * 5000 },
        { name: '排风控制', value: 10000 + Math.random() * 5000 },
        { name: '加湿控制', value: 10000 + Math.random() * 5000 },
        { name: '灯光控制', value: 10000 + Math.random() * 5000 },
      ],
    ];
    let option = {
      tooltip: {
        trigger: 'item',
      },

      series: [
        {
          name: '',
          type: 'pie',
          radius: ['40%', '70%'],
          label: {
            alignTo: 'edge',
            formatter: '{name|{b}}\n{time|{c} 次数}',
            minMargin: 5,
            edgeDistance: 7,
            lineHeight: 15,
            rich: {
              time: {
                fontSize: 16,
                color: '#ffffff',
              },
              name: {
                fontSize: 16,
                color: '#ffffff',
              },
            },
          },
          data: [
            { value: (1000 + Math.random() * 1000).toFixed(0), name: '进风控制' },
            { value: (1000 + Math.random() * 1000).toFixed(0), name: '排风控制' },
            { value: (1000 + Math.random() * 1000).toFixed(0), name: '加湿控制' },
            { value: (1000 + Math.random() * 1000).toFixed(0), name: '灯光控制' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  }
}
let dataObj: any = ref({});
let code = ref('');
eventEmitter.on('event', async (ev) => {
  if (!ev.detail) {
    dataObj.value = {};
    code.value = '';
    return;
  }
  let data = await monitor.monitorList({ current: 1, pageSize: 1, mushroomCode: ev.detail });
  dataObj.value = data.data.data.records[0];
  code.value = ev.detail;
});
async function startFirstData() {
  let data = await monitor.monitorList({ current: 1, pageSize: 1, mushroomCode: '1-1' });
  dataObj.value = data.data.data.records[0];
  code.value = '1-1';
}
(async () => {
  await getTodayData();
  await get7DayData();
  initChart();
  initRecordChart();
  startFirstData();
})();
</script>
<style lang="scss">
.weather-service {
  width: 473px;
}
.bg-title {
  background: url('./../assets/组 1142 拷贝.png') no-repeat;
  background-size: 100% 100%;
}
.weather-sub-title {
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: rgba(255, 255, 255, 0.8);
  height: 42px;
  line-height: 42px;
  font-family: MicrosoftYaHei;
}
.weather-report {
  height: 213px;
}
.weather-item {
  height: 56px;
}
.bg-common {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.weather-11 {
  background: url(./../assets/11.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.weather-12 {
  background: url(./../assets/12.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.weather-13 {
  background: url(./../assets/13.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.weather-14 {
  background: url(./../assets/14.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.weather-15 {
  background: url(./../assets/15.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.weather-16 {
  background: url(./../assets/16.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.show_data_value {
  font-size: 20px;
  font-family: MicrosoftYaHei;
  color: #18e6ff;
}
.show_data_value1 {
  display: block;
  white-space: nowrap;
  text-align: right;
}
.show_data_name {
  font-size: 16px;
  padding: 5px 0 7px 0;
}
.itemDay {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  flex: 1;
}
#weather-container {
  height: 150px;
  width: 100%;
  left: 0;
  top: 0px;
  z-index: 1000;
  position: absolute;
}
.detection {
  margin: 22px 0 27px 0;
}
.detection-item {
  width: 226px;
  height: 61px;
  background: url('./../assets/1146.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin-bottom: 19px;
}
.Icon20,
.Icon21,
.Icon22,
.Icon23 {
  position: absolute;
}
.Icon20 {
  left: 172px;
  top: 25px;
  width: 32px;
  height: 33px;
  background: url(./../assets/20.png) no-repeat;
  background-size: 100% 100%;
}
.Icon21 {
  left: 169px;
  top: 25px;
  width: 34px;
  height: 34px;
  background: url(./../assets/21.png) no-repeat;
  background-size: 100% 100%;
}
.Icon22 {
  left: 170px;
  top: 25px;
  width: 36px;
  height: 36px;
  background: url(./../assets/22.png) no-repeat;
  background-size: 100% 100%;
}
.Icon23 {
  left: 169px;
  top: 25px;
  width: 40px;
  height: 33px;
  background: url(./../assets/23.png) no-repeat;
  background-size: 100% 100%;
}
.smart {
  margin: 31px 0 21px 0;
}
#circle-record {
  height: 206px;
}
.detection-value {
  font-size: 20px;
  position: absolute;
  left: 23px;
  top: 28px;
}
.unit-small {
  font-size: 20px;
  transform-origin: left center;
  transform: scale(0.45, 0.45);
  color: #ffffff;
  display: inline-block;
}
.weather-wrap > div {
  width: 16.66%;
}
.precip .show_data_value1 {
  position: relative;
  left: 10px;
}
.windScale .show_data_value1 {
  position: relative;
  left: -10px;
}
.windDir .show_data_value1 {
  position: relative;
  left: -9px;
}
.amap-icon {
  cursor: pointer;
}
</style>
